<script setup>
import { defaults as defaultControls } from 'ol/control'
import TileLayer from 'ol/layer/Tile'
import Map from 'ol/Map'
import { fromLonLat } from 'ol/proj'
import OSM from 'ol/source/OSM'
import View from 'ol/View'
import { onMounted } from 'vue'
import 'ol/ol.css'

let map

onMounted(() => {
  initMap()
})

const initMap = () => {
  const center = fromLonLat([120.19, 30.26]) // 修正了坐标，原坐标可能在海洋中
  map = new Map({
    target: 'map',
    controls: defaultControls({
      attributionOptions: {
        collapsible: false
      }
    }).extend([]), // 修正了controls的用法
    layers: [
      new TileLayer({
        source: new OSM()
      })
    ],
    view: new View({
      center: center,
      zoom: 10 // 增加了缩放级别，4级可能太远了
    })
  })
}
</script>

<template>
  <main>
    <div id="map" class="map"></div>
  </main>
</template>

<style>
.map {
  height: 100vh;
  width: 1920px;
}
</style>
